<template>
    <view class="work-container">
        <NavBar :title="'高效办成一件事专区'" :isShowIcon="false" />
        <scroll-view scroll-y="true" class="scroll-Y">
            <image class="banner-img" src="/static/image/90.jpg" />
            <view class="segmented-bg">
                <view class="segmented-control-wrap">
                    <u-subsection
                        :list="subList"
                        :current="activeTab"
                        @change="onTabChange"
                        activeColor="#2864b4"
                        inactiveColor="#222"
                        fontSize="32rpx"
                        height="80rpx"
                        :bold="true"
                        :barStyle="{
                            background: '#ff8800',
                            height: '6rpx',
                            borderRadius: '3rpx'
                        }"
                        barPosition="bottom"
                    />
                </view>
            </view>
            <!-- 服务卡片列表 -->
            <view class="card-list">
                <template v-if="activeTab === 0">
                    <view v-for="(group, gidx) in personalGroups" :key="gidx" class="service-card">
                        <view class="card-header">
                            <image :src="group.icon" class="card-icon" mode="aspectFit" />
                            <text class="card-title">{{ group.groupName }}</text>
                        </view>
                        <view v-for="(item, idx) in group.items" :key="idx" class="card-item" @click="workClick(item)">
                            <text class="item-title">{{ item.title }}</text>
                            <u-icon name="arrow-right" color="#bdbdbd" size="22"></u-icon>
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view v-for="(group, gidx) in legalGroups" :key="gidx" class="service-card">
                        <view class="card-header">
                            <image :src="group.icon" class="card-icon" mode="aspectFit" />
                            <text class="card-title">{{ group.groupName }}</text>
                        </view>
                        <view v-for="(item, idx) in group.items" :key="idx" class="card-item" @click="workClick(item)">
                            <text class="item-title">{{ item.title }}</text>
                            <u-icon name="arrow-right" color="#bdbdbd" size="22"></u-icon>
                        </view>
                    </view>
                </template>
            </view>
            <!-- 底部备案信息 -->
            <view class="footer">
                西藏自治区人民政府办公厅<br />
                藏ICP备07000007号-2
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 0,
            subList: ['个人服务', '企业服务'],
            personalGroups: [
                {
                    groupName: '出生',
                    icon: '/static/image/infant.png',
                    items: [{ title: '新生儿出生一件事', path: 'infant' }]
                },
                {
                    groupName: '上学',
                    icon: '/static/image/education.png',
                    items: [{ title: '教育入学一件事', path: 'education' }]
                },
                {
                    groupName: '住房',
                    icon: '/static/image/house.png',
                    items: [{ title: '不动产登记', path: 'house' }]
                },
                {
                    groupName: '社保就医',
                    icon: '/static/image/social.png',
                    items: [{ title: '社会保障居民服务卡一件事', path: 'social' }]
                },
                {
                    groupName: '救助',
                    icon: '/static/image/disabled.png',
                    items: [{ title: '残疾人服务一件事', path: 'disabled' }]
                },
                {
                    groupName: '退休',
                    icon: '/static/image/retire.png',
                    items: [{ title: '退休一件事', path: 'retire' }]
                }
            ],
            legalGroups: [
                {
                    groupName: '开办企业',
                    icon: '/static/image/enterprise.png',
                    items: [
                        { title: '企业变更登记一件事', path: 'enterprise' },
                        { title: '开办餐饮店一件事', path: 'food' },
                        { title: '开办运输企业一件事', path: 'transport' }
                    ]
                },
                {
                    groupName: '规划建设',
                    icon: '/static/image/house.png',
                    items: [
                        { title: '不动产登记一件事', path: 'house' },
                        { title: '水电气网联合报装一件事', path: 'water' }
                    ]
                },
                {
                    groupName: '生产经营',
                    icon: '/static/image/stock.png',
                    items: [
                        { title: '企业上市合法合规核查一件事', path: 'stock' },
                        { title: '信用修复一件事', path: 'credit' }
                    ]
                },
                {
                    groupName: '破产注销',
                    icon: '/static/image/bankrupt.png',
                    items: [
                        { title: '企业注销登记一件事', path: 'cancel' },
                        { title: '企业破产信息核查一件事', path: 'bankrupt' }
                    ]
                }
            ]
        };
    },
    methods: {
        onTabChange(e) {
            this.activeTab = e;
        },
        workClick(item) {
            // 跳转逻辑
            uni.navigateTo({
                url: `/pages/guide/${item.path}/index?data=${encodeURIComponent(
                    JSON.stringify({ title: item.title, path: item.path })
                )}`
            });
        },
        goBack() {
            uni.navigateBack();
        }
    }
};
</script>

<style scoped lang="scss">
.work-container {
    background: #ecf1f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.banner-img {
    width: 100%;
    margin-top: 176rpx;
}
.segmented-bg {
    background: #ecf1f5;
    padding: 16rpx 0;
    height: 80rpx;
}

::v-deep .u-subsection__bar {
    background: #ff8800 !important;
    height: 8rpx !important;
    border-radius: 3rpx !important;
    bottom: 0 !important;
    top: auto !important;
    width: 70rpx !important;
    left: 20% !important;
}

::v-deep .u-subsection__item--active {
    font-weight: bold !important;
    color: #2864b4 !important;
}

::v-deep .u-subsection__item {
    color: #222 !important;
}
::v-deep .u-subsection {
    background-color: #ecf1f5 !important;
}
.card-list {
    flex: 1;
    padding: 0 24rpx 24rpx 24rpx;
}

.service-card {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(40, 100, 180, 0.06);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    padding: 24rpx 0 0 24rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #2864b4;
}

.card-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 12rpx;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

.card-title {
    font-size: 28rpx;
    font-weight: bold;
}

.card-item {
    display: flex;
    align-items: center;
    margin: 10px 12px;
    background: #ecf1f5;
    height: 40px;
    padding: 0 10px;
}

.card-item:last-child {
    border-bottom: none;
}

.item-title {
    flex: 1;
    color: #333;
}

.footer {
    background: #2864b4;
    color: #fff;
    text-align: center;
    font-size: 24rpx;
    padding: 24rpx 0 24rpx 0;
    margin-top: 24rpx;
    line-height: 1.8;
}
</style>
